<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p4_CSS显示模式</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            border: 5px solid #f00;
            display: block; /* 块级元素 允许设置宽高 竖着排列 */
        }

        .d2:hover, button:hover {
            display: none; /* 悬停时，元素显示模式为消失，且释放占据的文档流空间 */
        }

        span {
            background-color: #ff0;
            width: 200px;
            height: 200px;
            display: inline; /* 行内元素 不能设置宽高 横着排列 */
            display: block; /* 可以切换元素的显示模式 */
        }

        input, button {
            display: inline-block; /* 行内块元素 技能横着排列 又可以设置宽高 */
            width: 200px;
            height: 200px;
            background-color: lime;
        }

    </style>

</head>
<body>

<div class="d1">111</div>
<div class="d2">222</div>
<div class="d3">333</div>

<hr>

<span>1234567890</span>
<span>1234567890</span>
<span>1234567890</span>

<hr>

<input type="text">
<input type="text">
<input type="text">
<button>按钮</button>

</body>
</html>